<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/demo.css">
    <title>Document</title>
</head>

<body>
    <div class="bigBox">
        <!-- 舆情分析 -->
        <div class="login_name">舆 情 分 析</div>

        <!------------------------  左边 --------------------->
        <div class="left_Box">

            <ul class="left_item1">
                <li>警情警力</li>
                <li>实有人口</li>
                <li>流动人口</li>
                <li>实名制</li>
            </ul>

            <!-- 趁位置 -->
            <div class="mt40px"></div>

            <!-- 第一个盒子 -->
            <div class="left_item2">
                <p class="left_a">舆情来源分析</p>
                <div class="left_b">
                    <p class="left_b_a">地区：甘孜</p>
                    <p class="left_b_b">2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 散型图 -->
                    <div class="left_c_a left_top_yuan">
                        <ul>
                            <li class="a"
                                style="background-color: #ff6c00; text-align: center; line-height: 50px; width: 50px;height: 50px;">
                                灾害事故1</li>
                            <li class="b"
                                style="background-color: #9cff00; text-align: center; line-height: 40px; width: 40px;height: 40px;">
                                投诉2</li>
                            <li class="c"
                                style="background-color: #ffff00; text-align: center; line-height: 20px; width: 20px;height: 20px;">
                                求助</li>
                            <li class="d"
                                style="background-color: #066de2; text-align: center; line-height: 40px; width: 40px;height: 40px;">
                                无效报警</li>
                            <li class="e"
                                style="background-color: #77b5fb; text-align: center; line-height: 20px; width: 20px;height: 20px;">
                                交</li>
                            <li class="f"
                                style="background-color: #a83fef; text-align: center; line-height: 20px; width: 20px;height: 20px;">
                                邢</li>
                        </ul>
                    </div>
                    <!-- 横行 柱形图 -->
                    <div class="left_c_a left_top_zhu"></div>
                </div>
            </div>

            <!-- 中间盒子 -->
            <div class="left_item2">
                <p class="left_a">舆情区域分析</p>
                <div class="left_b">
                    <p class="left_b_a">状态：已调节</p>
                    <p class="left_b_b">时间段：2018-06-10至2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 散型图 -->
                    <div class="left_c_a  left_zhongjian_yuan">

                    </div>
                    <!-- 横行 柱形图 -->
                    <div class="left_c_a left_shu">

                    </div>
                </div>
            </div>

            <!-- 最下面盒子 -->
            <div class="left_item3">
                <p class="left_a">舆情环比分析</p>
                <div class="left_b">
                    <p class="left_b_a">状态：已调节</p>
                    <p class="left_b_b">时间段：2018-06-10至2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 散型图 -->
                    <div class="left_c_a  left_bom_biao">

                    </div>
                    <!-- 横行 柱形图 -->
                    <div class="left_c_b">
                        <p>今日舆情总数</p>
                        <h1>54</h1>
                        <small>环比 <img src="./img/iconup.png" alt="">2%</small>
                    </div>
                </div>
            </div>
        </div>

        <!------------------------  中间 --------------------->
        <div class="center_Box">
            <!-- 第一行的俩盒子 -->
            <div class="center_item1">

                <!-- 左边的   -->
                <div class="center_item1_left">
                    <p class="center_item1_left_a">今日舆情</p>
                    <div class="center_item1_left_b">
                        <p class="left_b_a">状态：已调节</p>
                        <p class="left_b_b">时间段：2018-06-10</p>
                    </div>
                    <ul class="aaaa">
                        <li>
                            <p>今日舆情总数</p>
                            <h1>54</h1>
                            <small>环比 <img src="./img/iconup.png" alt="">2%</small>
                        </li>
                        <li>
                            <p>今日舆情总数</p>
                            <h1 class="a">54</h1>
                            <small>环比 <img src="./img/icondown.png" alt="">2%</small>
                        </li>
                        <li>
                            <p>今日舆情总数</p>
                            <h1 class="b">4</h1>
                            <small>环比 <img src="./img/icondown.png" alt="">2%</small>
                        </li>
                        <li>
                            <p>今日舆情总数</p>
                            <h1>54</h1>
                            <small>环比 <img src="./img/iconup.png" alt="">2%</small>
                        </li>
                    </ul>
                </div>
                <!--右边的  -->
                <div class="center_item1_left">
                    <p class="center_item1_left_a">今日舆情</p>
                    <div class="center_item1_left_b">
                        <p class="left_b_a">状态：已调节</p>
                        <p class="left_b_b">时间段：2018-06-10</p>
                    </div>
                    <ul class="center_item1_left_c">
                        <li>
                            <img src="./img/hot.png" alt="">
                            <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警<br>新浪微博 转发：86 2018-06-14 11:08:56</p>
                        </li>
                        <li class="center_item1_left_c_a">
                            <img src="./img/hot.png" alt="">
                            <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警<br>新浪微博 转发：86 2018-06-14 11:08:56</p>
                        </li>
                        <li>
                            <img src="./img/hot.png" alt="">
                            <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警<br>新浪微博 转发：86 2018-06-14 11:08:56</p>
                        </li>
                        <li class="center_item1_left_c_a">
                            <img src="./img/hot.png" alt="">
                            <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警<br>新浪微博 转发：86 2018-06-14 11:08:56</p>
                        </li>
                        <li>
                            <img src="./img/hot.png" alt="">
                            <p>村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村民报警<br>新浪微博 转发：86 2018-06-14 11:08:56</p>
                        </li>

                    </ul>
                </div>


            </div>

            <!--  -->
            <div class="center_item2">
                <p class="center_item2_a">今日舆情</p>
                <div class="center_item2_b">
                    <p class="left_b_a">状态：已调节</p>
                    <p class="left_b_b">时间段：2018-06-10</p>
                </div>

                <div class="center_item2_item2">
                    <!--中间下面的折线+柱形  -->
                    <div class="center_item2_left   center_bom_zhe_zhu">

                    </div>

                    <div class="center_item2_right">
                        <p>今日舆情总数</p>
                        <h1>54</h1>
                        <small>环比 <img src="./img/iconup.png" alt="">2%</small>
                    </div>
                </div>
            </div>
        </div>


        <!------------------------  右边 --------------------->
        <div class="right_Box">
            <ul class="left_item1">
                <li>警情警力</li>
                <li>实有人口</li>
                <li>流动人口</li>
                <li>实名制</li>
            </ul>

            <!-- 趁位置 -->
            <div class="mt40px"></div>

            <!-- 第一个盒子 -->
            <div class="left_item2">
                <p class="left_a">舆情来源分析</p>
                <div class="left_b">
                    <p class="left_b_a">地区：甘孜</p>
                    <p class="left_b_b">2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 饼形 -->
                    <div class="left_c_a right_top_bing">

                    </div>
                </div>
            </div>

            <!-- 中间盒子 -->
            <div class="left_item2">
                <p class="left_a">舆情区域分析</p>
                <div class="left_b">
                    <p class="left_b_a">状态：已调节</p>
                    <p class="left_b_b">时间段：2018-06-10至2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 折线图 -->
                    <div class="left_c_a right_bom_zheXian">

                    </div>
                </div>
            </div>

            <!-- 最下面盒子 -->
            <div class="left_item2">
                <p class="left_a">舆情环比分析</p>
                <div class="left_b">
                    <p class="left_b_a">状态：已调节</p>
                    <p class="left_b_b">时间段：2018-06-10至2018-06-14</p>
                </div>
                <div class="left_c">
                    <!-- 饼行 -->
                    <div class="left_c_a  bom_bing">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="./echarts.min.js"></script>
<script>
    // 

    // ================= 左侧上面的横着的柱形
    const myChartDom8 = document.querySelector('.left_bom_biao')
    const myChart8 = echarts.init(myChartDom8)
    const config8 = {
        xAxis: {
            data: [
                '0', '10000,', '20000', '30000', '40000', '50000', '60000', '70000'
            ],
            grid: {
                x: 50,
                y: 50
            }
        },
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '10%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
        },
        yAxis: {

        },
        series: {
            type: 'scatter',
            data: [55, 65, 70, 75, 80, 85, 90]
        }
    }
    myChart8.setOption(config8)

    // ================= 左侧上面的横着的柱形
    const myChartDom6 = document.querySelector('.left_shu')
    const myChart6 = echarts.init(myChartDom6)
    const config6 = {
        title: {
            // text: 'World Population'
        },
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow'
        //     }
        // },
        // legend: {},
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: 'auto',
            left: 'auto',
            right: 'auto',
            bottom: 'auto',
            containLabel: true
        },
        xAxis: {
            splitLine: {
                show: false   // 是否显示， false隐藏   true显示
            },
        },
        yAxis: {
            // type: 'category',
            data: ['论坛', '贴吧', '新闻', '网站', '微博'],
            splitLine: {
                show: false   // 是否显示， false隐藏   true显示
            },
        },
        series: [
            {
                // name: '2012',
                type: 'bar',
                data: [10, 20, 40, 50, 20, 100],
                showBackground: true,
                // color: '#6db893',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#28aead' },
                        { offset: 1, color: '#9cc184' },
                        // { offset: 1, color: 'pink' }
                    ])
                },
            }
        ]
    }
    myChart6.setOption(config6)


    // // ================= 左侧中间盒子的横着的柱形
    const myChartDom5 = document.querySelector('.left_top_zhu')
    const myChart5 = echarts.init(myChartDom5)
    const config5 = {
        title: {
            // text: 'World Population'
        },
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow'
        //     }
        // },
        // legend: {},
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: 'auto',
            left: 'auto',
            right: 'auto',
            bottom: 'auto',
            containLabel: true
        },
        xAxis: {
            //     // type: 'value',
            //     // boundaryGap: [0, 0.01],
            splitLine: {
                show: false   // 是否显示， false隐藏   true显示
            },
        },
        yAxis: {
            // type: 'category',
            data: ['论坛', '贴吧', '新闻', '网站', '微博'],
            splitLine: {
                show: false   // 是否显示， false隐藏   true显示
            },
        },
        series: [
            // {
            //     name: '2011',
            //     type: 'bar',
            //     data: [18203, 23489, 29034, 104970, 131744, 630230]
            // },
            // {
            //     // name: '2012',
            //     type: 'bar',
            //     data: [10, 20, 40, 50, 20, 100],
            //     color: '#6db893',
            // },
            {
                type: 'bar',
                showBackground: true,
                data: [10, 20, 40, 50, 20, 100],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#28aead' },
                        { offset: 1, color: '#9cc184' },
                        // { offset: 1, color: 'pink' }
                    ])
                },
                // emphasis: {
                //     itemStyle: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: '#2378f7' },
                //             { offset: 0.7, color: '#2378f7' },
                //             { offset: 1, color: '#83bff6' }
                //         ])
                //     }
                // },
            }
        ]
    }
    myChart5.setOption(config5)


    // // // ================= 左侧中间盒子的圆
    const myChartDom7 = document.querySelector('.left_zhongjian_yuan')
    console.log(myChartDom7);
    const myChart7 = echarts.init(myChartDom7)
    const data = [
        [5000, 10000, 6785.71],
        [4000, 10000, 6825],
        [3000, 6500, 4463.33],
        [2500, 5600, 3793.83],
        [2000, 4000, 3060],
        [2000, 4000, 3222.33],
        [2500, 4000, 3133.33],
        [1800, 4000, 3100],
        [2000, 3500, 2750],
        [2000, 3000, 2500],
        [1800, 3000, 2433.33],
        [2000, 2700, 2375],
        [1500, 2800, 2150],
        [1500, 2300, 2100],
        [1600, 3500, 2057.14],
        [1500, 2600, 2037.5],
        [1500, 2417.54, 1905.85],
        [1500, 2000, 1775],
        [1500, 1800, 1650]
    ];
    const cities = ['北京', '上海', '深圳', '广州', '苏州']
    const barHeight = 50;
    const config7 = {
        // title: {
        //     text: 'How expensive is it to rent an apartment in China?',
        //     subtext: 'Data from https://www.numbeo.com'
        // },
        // legend: {
        //     show: true,
        //     top: 'bottom',
        //     data: ['Range', 'Average']
        // },
        grid: {
            top: 100
        },
        angleAxis: {
            type: 'category',
            data: cities
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                const id = params.dataIndex;
                return (
                    cities[id] +
                    '<br>Lowest：' +
                    data[id][0] +
                    '<br>Highest：' +
                    data[id][1] +
                    '<br>Average：' +
                    data[id][2]
                );
            }
        },
        radiusAxis: {},
        polar: {},
        textStyle: {
            color: '#7ecef4'
        },
        series: [
            {
                type: 'bar',
                itemStyle: {
                    color: 'transparent'
                },
                data: data.map(function (d) {
                    return d[0];
                }),
                coordinateSystem: 'polar',
                stack: 'Min Max',
                silent: true
            },
            {
                type: 'bar',
                data: data.map(function (d) {
                    return d[1] - d[0];
                }),
                coordinateSystem: 'polar',
                name: 'Range',
                stack: 'Min Max'
            },
            {
                type: 'bar',
                itemStyle: {
                    color: 'transparent'
                },
                data: data.map(function (d) {
                    return d[2] - barHeight;
                }),
                coordinateSystem: 'polar',
                stack: 'Average',
                silent: true,
                z: 10
            },
            {
                type: 'bar',
                data: data.map(function (d) {
                    return barHeight * 2;
                }),
                coordinateSystem: 'polar',
                name: 'Average',
                stack: 'Average',
                barGap: '-100%',
                z: 10
            },

        ]
    }
    myChart7.setOption(config7)

    
    // // ================= 中间下面的折线+柱形
    const myChartDom4 = document.querySelector('.center_bom_zhe_zhu')
    const myChart4 = echarts.init(myChartDom4)
    const config4 = {
        title: {

        },
        tooltip: {},

        label: { color: 'vertical' }, // 去除文字白边
        legend: {
            show: true,
            top: 'auto',
            textStyle: {
                color: '#fff'
            }
        },
        // color:['#00b7ee','#00f1fc'], // 更改圆饼渲染的颜色
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '20%',
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            boundaryGap: false,
            splitNumber: 25,  // 配置 Y 轴数值间隔
            axisPointer: {
                type: 'shadow'
            }
        },
        textStyle: {
            color: '#ccc'
        },

        yAxis:
            // min: 0,
            // max: 250,
            // // splitNumber:7,  // 配置 Y 轴数值间隔
            // lineStyle: {
            //     show:false,
            //     width: 3,  // 设置虚线宽度
            //     // type: 'dotted'  // 虚线'dotted' 实线'solid'
            // },
            [
                {
                    type: 'value',
                    // name: 'Precipitation',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} ml'
                    },

                },
                {
                    type: 'value',
                    // name: 'Temperature',
                    min: 0,
                    max: 25,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value} °C'
                    },
                    splitLine: {
                        show: false   // 是否显示， false隐藏   true显示
                    },
                }
            ],


        series: [
            // 折线
            {
                type: 'line',
                name: '同比增溜',
                data: [10, 20, 40, 50, 60, 100, 200, 240, 230, 160, 110, 60],
                // areaStyle: {},  // 折线填实
                smooth: true,  // 折线变为平滑
                color: '#faf875',

            },
            // 柱形图
            {
                name: '2018年',
                type: 'bar',
                data: [5, 10, 15, 20, 20, 60, 170, 180, 40, 20, 5, 5],
                color: '#01b3d4'  // 更改图颜色
            },
            // 柱形图
            {
                name: '2017年',
                type: 'bar',
                data: [5, 10, 15, 20, 20, 70, 140, 160, 30, 20, 5, 5],
                color: '#834fdc'  // 更改图颜色
            }
        ]
    }
    myChart4.setOption(config4)

    // ================= 右上第一个饼形
    const myChartDom3 = document.querySelector('.right_top_bing')
    const myChart3 = echarts.init(myChartDom3)
    const config3 = {
        title: {

        },
        // tooltip: {
        //     show: true,
        //     feature: {
        //         mark: { show: true },
        //         mark: { show: true, readOnly: false },
        //         restore: { show: true },
        //         saveAsImage: { show: true }

        //     }
        // },
        label: { color: 'vertical' }, // 去除文字白边
        // legend: {
        //     top: 'auto',
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9', '#76c4bf', '#e5ffc7', '#508097'], // 更改圆饼渲染的颜色
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [20, 50],
                center: ['50%', '50%'],
                roseType: 'area',
                data: [
                    {
                        name: '涉蒙',
                        value: 20,
                    },
                    {
                        name: '涉疆',
                        value: 10,
                    },
                    {
                        name: '涉军',
                        value: 30,
                    },
                    {
                        name: '涉恐',
                        value: 40,
                    },
                    {
                        name: '涉藏',
                        value: 10,
                    },
                    {
                        name: '涉稳',
                        value: 40,
                    },
                    {
                        name: '涉磬',
                        value: 40,
                    }
                ]
            }
        ]
    }
    myChart3.setOption(config3)

    // ================= 右下第二个折线
    const myChartDom2 = document.querySelector('.right_bom_zheXian')
    const myChart2 = echarts.init(myChartDom2)
    const config2 = {
        title: {

        },
        tooltip: {},
        label: { color: 'vertical' }, // 去除文字白边
        legend: {
            show: false
            // top: 'auto',
            // textStyle:{
            //     color:'#fff'
            // }
        },
        // color:['#00b7ee','#00f1fc'], // 更改圆饼渲染的颜色
        grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '20%',
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            data: ['6-08', '6-09', '6-010', '6-11', '6-12', '6-13', '6-14'],
            boundaryGap: false,
            splitNumber: 25,  // 配置 Y 轴数值间隔
        },
        textStyle: {
            color: '#ccc'
        },

        yAxis: {
            min: 0,
            max: 250,
            // splitNumber:7,  // 配置 Y 轴数值间隔
            lineStyle: {
                width: 3,  // 设置虚线宽度
                // type: 'dotted'  // 虚线'dotted' 实线'solid'


            },

        },
        series: [
            {
                type: 'line',
                // radius: ['0', '50%'],
                // center: ['50%', '60%'],
                data: [
                    120, 140.100, 140, 70, 230, 200, 250
                ],
                areaStyle: {opacity:1},
                color: '#57af87',
            }
        ]
    }
    myChart2.setOption(config2)

    // =================== 右下角 饼图
    const myChartDom1 = document.querySelector('.bom_bing')
    const myChart1 = echarts.init(myChartDom1)
    const config1 = {
        title: {

        },
        tooltip: {},
        label: { color: 'vertical' }, // 去除文字白边
        legend: {
            top: 'auto',
            textStyle: {
                color: '#fff'
            }
        },
        color: ['#00b7ee', '#00f1fc'], // 更改圆饼渲染的颜色
        series: [
            {
                type: 'pie',
                radius: ['0', '50%'],
                center: ['50%', '60%'],
                data: [
                    {
                        name: '境内',
                        value: 40,
                    },
                    {
                        name: '境外',
                        value: 60,
                    }
                ]
            }
        ]
    }
    myChart1.setOption(config1)

</script>

</html>